
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title> 团队编辑 </title>
  <link rel="stylesheet" type="text/css" href="/css/style.css" />

  <style type="text/css">
    /*字体样式*/
    *, body {
      margin: 0px;
      font-family: '微软雅黑',serif;
    }
    /*超链接样式*/
    a:link{
      color:red;
    }
    a:visited{
      color:#008000;
    }
    a:active{
      color:cadetblue;
    }
    a:hover{
      color: #a71d5d;
    }
  </style>
  <script src="/js/jquery-1.10.2.min.js"></script>
  <script src="/js/jquery.form.js"></script>
  <script src="/js/generic.js"></script>
</head>

<body>
<table class="maintable">
  <tr>
    <td class="rightmaintd" valign="top">
<!--      返回team超链接-->
      <div class="searchdiv">
        <a href="/team">&lt; 返回</a>
        <div class="rightsearchdiv"><!-- name --></div>
      </div>
<!--      编辑表单主体-->
      <table class="leftrighttable" border="0">
        <tr>
          <td class="lefttdtable" width="50%" valign="top">
            <table cellpadding="6">
              <tr>
                <td class="tdname">团队名称</td>
                <td><input type="text" id="teamName" class="textinput" maxlength="50" th:value="${team.getTeamName()}"></td>
              </tr>
              <tr>
                <td class="tdname">医生姓名</td>
                <td><input type="text" id="doctorName" class="textinput" maxlength="50" th:value="${team.getDoctorName()}"></td>
              </tr>
              <tr>
                <td class="tdname">电话</td>
                <td><input type="text" id="tel" class="textinput" maxlength="50" th:value="${team.getTel()}"></td>
              </tr>

            </table>
          </td>
          <td class="righttdtable" width="50%" valign="top"></td>
        </tr>
      </table>
<!--保存按钮-->
      <div class="shenhediv">
        <input type="button" value="保 &nbsp; &nbsp; 存" class="baocunbtn4"  id="Sbutton">
        <span id="lrxx"></span>
        <span id="Id" th:text="${team.getId()}" class="shownone">Id</span>
      </div>

    </td>
  </tr>
</table>


</body>
</html>
<script type="text/javascript">
  // 保存按钮点击事件处理函数
  var saveButton = document.getElementById('Sbutton');
  saveButton.addEventListener('click', ()=> {
    var id=document.getElementById('Id').textContent;
    var teamName = document.getElementById('teamName').value;
    if(teamName=="") {
        alert("请输入团队名称！");
        return;
      }
    var doctorName = document.getElementById('doctorName').value;
    if(doctorName=="")
      doctorName=null;
    var tel = document.getElementById('tel').value;
    if(tel=="")
      tele=null;

    // 创建要发送的数据对象
    var data = {
      id: id,
      teamName: teamName,
      doctorName: doctorName,
      tel: tel
    };
    var xhr = new XMLHttpRequest();
    xhr.open('PUT', '/team/', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 请求完成并成功处理后的回调函数
        console.log('数据已成功发送至后端');
        alert("保存成功！");
        window.location.href="/team";
      }
    };
    xhr.send(JSON.stringify(data));
  });
</script>